<template>
	<uni-popup ref="popup" type="center" border-radius="10px" :mask-click="false" :is-mask-click="false">
		<view class="toast">
			<uni-icons class="icon" v-if="mode===1" type="checkbox" color="#49AD63" size="44"></uni-icons>
			<uni-icons class="icon" v-if="mode===2" type="close" color="#E92309" size="44"></uni-icons>
			<text class="text">{{ message }}</text>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				mode: 0, // 0-文案；1-成功；2-失败
				message: '',
				duration: 3000
			};
		},
		computed: {},
		methods: {
			async show(options) {
				return new Promise((resolve, reject) => {
					try {
						console.log("zkToast options: ", options);
						this.mode = options.mode || 0;
						this.message = options.message || '';
						this.duration = options.duration || 3000;
						this.$refs.popup.open();
						setTimeout(() => {
							this.$refs.popup.close();
							resolve();
						}, this.duration);
					} catch (e) {
						console.log("zkToast err: ", e);
						reject("fail!");
					}
				});
			},
			// demo(){
			// 	this.$utils.showToast(this, {
			// 		message: '操作成功',
			// 		duration: 3000,
			// 	});
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.toast {
		padding: 25rpx 40rpx;
		max-width: 560rpx;
		width: fit-content;
		background-color: rgba(255, 255, 255, 0.85);
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		>.icon {
			width: 48px;
			height: 48px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		>.text {
			padding: 4rpx 0;
			font-weight: 400;
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
		}
	}
</style>